<template>
  <el-dialog :title="'预授权'" :close-on-click-modal="false" :visible.sync="visible" :append-to-body="true">
    <div>
      <el-table :data="dataList" border v-loading="dataListLoading" style="width: 100%;">
        <el-table-column prop="payPrice" header-align="center" align="center" label="科目/方式">
          <template slot-scope="scope">
            <div v-if="scope.row.payType == 0">
              <span>预收账款</span>
            </div>
            <div v-if="scope.row.payType == 1">
              <span>预授权</span>
            </div>
            <div v-if="scope.row.payType == 2">
              <span>{{scope.row.consumeName}}</span>
            </div>
            <a target="_blank"></a>
            <div v-if="scope.row.payType == 3">
              <span>押金</span>
            </div>
            <div v-if="scope.row.payType == 4">
              <span>房费</span>
            </div>
            <div v-if="scope.row.payType == 5">
              <span>预收退款</span>
            </div>
            <div v-if="scope.row.payType == 6">
              <span>结账收款</span>
            </div>
            <div v-if="scope.row.payType == 7">
              <span>结账退款</span>
            </div>
            <div v-if="scope.row.payType == 8">
              <span>退押金</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="payPrice" header-align="center" align="center" label="付款方式">
          <template slot-scope="scope">
            <span>银行卡</span>
          </template>
        </el-table-column>

        <el-table-column prop="payPrice" header-align="center" align="center" label="授权额">
          <template slot-scope="scope">
            <span v-if="scope.row.payPrice">￥{{scope.row.payPrice}}</span>
            <span v-else>--</span>
          </template>
        </el-table-column>

        <el-table-column prop="remarks" header-align="center" align="center" label="备注">
          <template slot-scope="scope">
            <span v-if="scope.row.remarks">{{scope.row.remarks}}</span>
            <span v-else>暂无</span>
          </template>
        </el-table-column>

        <el-table-column prop="creatTime" header-align="center" align="center" label="时间"></el-table-column>

        <el-table-column prop="type" header-align="center" align="center" label="标签">
          <template slot-scope="scope">
            <span v-if="scope.row.type == 0">未结</span>
            <span v-if="scope.row.type == 1">已结</span>
            <span v-if="scope.row.type == 2">已转</span>
            <span v-if="scope.row.turnType == 1">,转出</span>
            <span v-if="scope.row.turnType == 2">,转入</span>
            <span v-if="scope.row.demolitionType == 1">,拆账</span>
          </template>
        </el-table-column>
<!--       <el-table-column fixed="right" header-align="center" align="center" width="150" label="操作">
          <template slot-scope="scope">
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination style="text-align: right;margin-top: 10px;"
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper"
      ></el-pagination>
    </div>  </el-dialog>
</template>

<script>
import moment from 'moment';
export default {
  data () {
    return {
      pop:{},
      visible:false,
      dataList: [],
      dataForm: {
        peopleId: '',
        singleId:'',
        roomIds:''
      },
      pageIndex: 1,
      pageSize: 10,
      totalPage: 0,
      dataListLoading: false,
    };
  },
  methods: {
    init(pop) {
      console.log(1)
      this.visible = true
      this.popInfo = pop;
      this.dataForm.peopleId = pop.id
      this.getDataList();
      this.$nextTick(() => {
      });
    },
    init2(info) {
      this.visible = true
      this.info = info;
      this.dataForm.roomIds = info.roomIds;
      this.dataForm.singleId = info.singleId;
      this.getDataList2();
      this.$nextTick(() => {
        // this.$refs.common.init(pop);

      });
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/list'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          peopleId: this.dataForm.peopleId,
          viewType: 2,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
          console.log(this.dataList)
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 获取数据列表
    getDataList2() {
      this.dataListLoading = true;
      this.$http({
        url: this.$http.adornUrl('/hotel/thotelfloorroomcheckinaccounting/list2'),
        method: 'get',
        params: this.$http.adornParams({
          page: this.pageIndex,
          limit: this.pageSize,
          roomIds: this.dataForm.roomIds,
          viewType: 2,
          singleId: this.dataForm.singleId,
        })
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.dataList = data.page.list;
          this.totalPage = data.page.totalCount;
        } else {
          this.dataList = [];
          this.totalPage = 0;
        }
        this.dataListLoading = false;
      });
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val;
      this.pageIndex = 1;
      if(this.curr == 1){
        this.getDataList();
      }else{
        this.getDataList2();
      }
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageIndex = val;
      if(this.curr == 1){
        this.getDataList();
      }else{
        this.getDataList2();
      }
    },
  },
};
</script>

<style>
.common_prompt {
    padding: 9px 16px;
    background: #fff3f2;
    border: 1px solid #fde0d4;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}
#printMenu {
  transform: rotate(90deg);
}
</style>
